<template>
    <div>
    	<div id="home">

    		<header>
				<div class="index_header">
					<div class="city" @tap="onderurl('/home/select_area','',0)">
						<a>
							<img src="../../assets/images/index_city.png" />
							<span>{{community.name}}</span>
							<i class="mui-icon mui-icon-arrowdown"></i>
						</a>
					</div>
					<div class="search" @tap="open_search_view(true)">
						<a><i class="mui-icon mui-icon-search"></i></a>
						<!--<input type="text" name="" id="search" value="" placeholder="请输入关键词搜索..."/><i class="mui-icon mui-icon-closeempty" @click="empty"></i>-->
					</div>
				</div>
			</header>



			<!--banner-->
		<div id="home_slider" class="mui-slider">
			<div class="mui-slider-group mui-slider-loop">
				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a>
						<img :src="$store.state.home_status.last_banner"  />
					</a>
				</div>
				<!-- 第N张 -->
				<div class="mui-slider-item" v-for="(item,i) in $store.state.home_status.home_banner" :key="i">
					<a>
						<img :src="item.pic" @tap="go_goods_detail(item.url)"/>
					</a>
				</div>
				<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a>
						<img :src="$store.state.home_status.first_banner"  />
					</a>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator" v-for="(item,i) in $store.state.home_status.home_banner" :key="i"></div>
			</div>
		</div>


			<!--菜单-->
			<div class="index_nav">
	            <ul>
	            	<li v-for="(item,i) in nav_list" class="mok" :key="i" :data-id="item.tid" :value="item.name" @tap="onderurl('/home/modular',item.tid,3,item.name)">
						<a><img :src="item.logo" /><span v-html="item.name"></span></a>
					</li>
	            </ul>
	            <div class="clear"></div>
	        </div>
	        <!--公告-->
	        <div class="index_notice">
				<img src="../../assets/images/index_gonggao.png" />
				<div class="" @tap="onderurl('/home/details',shequgonggao.id,2)">
					<!--<a href="http://127.0.0.1:8020/7.11/page/xiangqing.html?id=102&type=0&status=0"></a>-->
					<p>
						<a>{{shequgonggao.title}}</a>
					</p><i class="mui-icon mui-icon-forward"></i>
				</div>
			</div>
			<!--广告-->
			<div class="index_avertisement">
				<div class="div1">
					<ul class="mui-row">
						<li :class="i==0?'l1 mui-col-xs-8 mui-col-sm-8':'l2 mui-col-xs-4 mui-col-sm-4'"    v-for="(item,i) in mofang" :key="i">
							<a @tap="onderurl('/shop/goods_list/goods',item.url,1)"><img :src="item.pic" /></a>
						</li>
					</ul>
				</div>
				<div class="div2">
					<ul class="mui-row">
						<li class="l1 mui-col-xs-4 mui-col-sm-4" v-for="(item,i) in mofang2" :key="i">
							<a @tap="onderurl('/shop/goods_list/goods',item.url,1)"><img :src="item.pic" /></a>
						</li>
					</ul>
				</div>
			</div>
			<!--精品专区-->
			<div class="index_shop">
				<div class="title">
					<img src="../../assets/images/index_11.png" />
					<p>精品专区</p>
					<img src="../../assets/images/index_12.png" />
				</div>
				<div class="con">
					<ul>
						<li v-for="(item,i) in like_list" :key="i">
							<a @tap="onderurl('/shop/goods_list/goods',item.goodsid,1)">
								<p class="img"><img :src="item.pic" /></p>
								<p class="t" style="
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  box-orient: vertical;
                  -webkit-line-clamp: 2;
                  line-clamp: 2;
                  overflow: hidden;
                " v-html="item.name"></p>
								<p class="t2"><span class="l">￥{{item.min_price}}</span><span class="r">{{item.sales}}人付款</span></p>
							</a>
						</li>
					</ul>
				</div>
				<div class="clear"></div>
			</div>
    	</div>

        <HomeFooter></HomeFooter>

    </div>
</template>
<script>
import HomeFooter from "../../components/HomeFooter";
import home_ajax from "@/ajax/home_ajax";
import h5_plus from "../../tools/h5_plus"
export default {
  name: "index",
  data() {
    return {
      mofang: [],
      mofang2: [],
      nav_list: [],
      like_list: [],
      mofangdata: [],
      community: "", //社区
      shequgonggao: "" //公告
    };
  },
  methods: {
    onderurl: function(url, val, type, name) {
      console.log(1);

      this.$host.onderurls(url, val, type, name);
		},
    go_goods_detail(goodsid){
      console.log(goodsid);
      this.$router.push("/shop/goods_list/goods?goodsid="+goodsid)
    },
    open_search_view(tf){
      this.$store.commit("open_search_view",tf)
    },
		home_data_init(){

      var that = this;
      if (!this.$store.state.account.community) {
        console.log("h5_plus.get_position")
        mui.plusReady(function() {
          console.log("mui.plusReady-->h5_plus")
          h5_plus.get_position(res => {

            // 定位社区成功，改变状态中的社区信息
            that.$store.commit("up_data_community", res);
            console.log("定位社区成功，改变状态中的社区信息")
            console.log(JSON.stringify(res))
            that.home_data_init()
          });
        });
        return;
      }else{
        this.community = this.$store.state.account.community
      }


				 /*
		获取首页banner   get_home_banner
		params
				bid --> 社区ID
				sqid --> 社区ID
				type --> 1
		*/
    home_ajax.get_home_banner(
      {
        bid: this.$store.state.account.community.sqid,
        sqid: this.$store.state.account.community.sqid,
        type: 1
      },
      res => {
        if (res.length > 0) {
          //  this.$store.state.home_status.home_banner
					this.$store.commit("up_data_home_banner", res);
					setTimeout(()=>{
						var gallery = mui("#home_slider");
						gallery.slider({
							interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
						});
					},1000)
        } else {
          // mui.toast("暂无banner数据");
        }
      }
    );

    /*
		获取魔方图   get_mofang
		params
				bid --> 社区ID
				sqid --> 社区ID
				type --> 2
		*/
    home_ajax.get_mofang(
      {
        bid: this.$store.state.account.community.sqid,
        sqid: this.$store.state.account.community.sqid,
        type: 2
      },
      res => {
        if (res.length > 0) {
          let mofang = []
          for (var i = 0; i < 2; i++) {
           mofang.push(res[i]);
          }
          this.mofang= mofang;
          let mofang2 = [];
          for (var i = 2; i < res.length; i++) {
            mofang2.push(res[i]);
          }
          this.mofang2= mofang2
        } else {
          // mui.toast("暂无魔方数据");
        }
      }
    );
    /*
		获取社区公告  get_community_msg
		params
				sqid --> 社区ID
		*/
    home_ajax.get_community_msg(
      {
        sqid: this.$store.state.account.community.sqid
      },
      res => {
        if(res.data.length>0){
          this.shequgonggao = res.data[0];
        }else {
          // mui.toast("暂无社区公告");
        }

      }
    );
    /*
		获取首页展示商品  get_home_goods
		params
				bid --> 社区ID
				sqid --> 社区ID
				type --> 1
		*/
    home_ajax.get_home_goods(
      {
        bid: this.$store.state.account.community.sqid,
        sqid: this.$store.state.account.community.sqid,
        type: 1,
        page:1
      },
      res => {
        if (res.length > 0) {
          this.like_list = res;
        } else {
          mui.toast("暂无数据");
        }
      }
    );
    /*
		获取八大模块一级菜单  get_func_class_lv1
		params
				不用传参
		*/
    home_ajax.get_func_class_lv1({
      bid:this.$store.state.account.community.sqid
    }, res => {
      if (res.length > 0) {
        this.nav_list = res;
      } else {
        mui.toast("暂无数据");
      }
    });
		}
  },
  created() {


		this.home_data_init()

  },
  mounted() {

  },
  computed:{
    // 获取状态管理中的定位信息
    community_info(){
      console.log("------------community_info---------------")
      console.log(this.$store.state.account.community)
      console.log("------------community_info---------------")
      return this.$store.state.account.community;
    }
  },

  watch:{
    community_info(old_community,new_community){
      console.log("old_community-->"+JSON.stringify(old_community))
      console.log("new_community-->"+JSON.stringify(new_community))
      console.log("社区信息改变，重新获取首页数据")
      this.home_data_init()
    }
  },
  components: {
    HomeFooter
  }
};
</script>
<style lang="less" scoped>
@import "../../../static/pxvalue.less";
@import "../../assets/less/index/index.less";
.index_shop .con li{
  position: relative;
}
.index_shop .con .t2{
  width: 100%;
  position: absolute;
  bottom: 0;
}
</style>

